<template>
    <div class="app-container">
        <div class="filter-container">
            <el-button class="filter-item" v-if="~accessable.indexOf('manage:message_add')" type="primary" v-waves icon="el-icon-plus" @click="handleUpdate(null)">添加</el-button>
        </div>
        <el-table :data="list" @sort-change="sortChange" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row
        style="width: 100%">

            <el-table-column align="center" type="index" label="序号" width="80"></el-table-column>

            <el-table-column prop="templateTitle" align="center" label="模板名称" width="120">
                <template slot-scope="scope">
                    <span>{{scope.row.templateTitle}}</span>
                </template>
            </el-table-column>
        
            <el-table-column width="100" prop="status" align="center" label="发布状态">
                <template slot-scope="scope">
                    <el-tag type="scope.row.status">{{scope.row.status|statusFilter}}</el-tag>
                </template>
            </el-table-column>
        
            <el-table-column align="center" label="操作" width="200" class-name="small-padding">
                <template slot-scope="scope">
                    <el-button type="primary" v-if="~accessable.indexOf('manage:message_modify')" size="mini" @click="handleUpdate(scope.row)">修改</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="params.page"
                :page-sizes="[10,20,30,50]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    
        <el-dialog :title="isEditing?'修改':'添加'" :visible.sync="dialogFormVisible">
            <el-form class="dialog-form" :rules="rules" ref="dataForm" :model="temp" label-position="left" label-width="120px">
                
                <el-form-item label="发布状态" prop="status">
                    <el-radio-group v-model="temp.status">
                        <el-radio v-for="(item,value) in statusFilter" :key="value" :label="value" :value="value">{{item}}</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="模板名称" prop="templateTitle">
                    <el-input v-model="temp.templateTitle" placeholder="请输入模板名称"></el-input>
                </el-form-item>

                <el-form-item label="模板内容" prop="templateContent">
                <div class="quill-wrap" style="height:350px;">
                    <quill-editor style="height:300px;" v-model="temp.templateContent" ref="myQuillEditor" :options="editorOption">
                    </quill-editor>
                </div>
                </el-form-item>
        
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" :loading="submiting" @click="submitFormAction">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
 
<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
// import { container, ImageExtend, QuillWatch } from "quill-image-extend-module";

import { quillEditor, Quill } from "vue-quill-editor";
let statusFilter = ["停用", "启用"];

let statustagFilter = ["success", "danger", "info", "warning"];
let usersFilter = ["优惠活动","个人消息","通知公告"];
let userstagFilter = ["success"];

export default {
    components: {
        quillEditor
    },
    
    data() {
        return {
            total:0,
            labelList:[],
            temp: {
                id: "",
                title: "",
                status: "",
                templateContent:"",
                templateTitle:"",
            },
            choiceType:[
                {
                    value: 1,
                    label: "全部会员"
                },
                {
                    value: 2,
                    label: "标签会员"
                }
            ],
            
            editorOption: {
                placeholder: "在这里输入内容",
                modules: {
                    // ImageExtend: {
                    //   loading: true,
                    //   name: "file",
                    //   action: this.UPLOAD_URL,
                    //   response: res => {
                    //     return res.info;
                    //   }
                    // }
                    // ,
                    // toolbar: {
                    //   container: container,
                    //   handlers: {
                    //     image: function() {
                    //       QuillWatch.emit(this.quill.id);
                    //     }
                    //   }
                    // }
                }
            },
            pickerOptions1: {
                shortcuts: [{
                    text: "今天",
                    onClick(picker) {
                        picker.$emit("pick", new Date());
                    }
                    },
                    {
                    text: "昨天",
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit("pick", date);
                    }
                    },
                    {
                    text: "一周前",
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit("pick", date);
                    }
                    }
                ]
            },
            marketingType:"",
            params: {marketingType: this.marketingType, pageNo: 1, pageSize: 10},

            statusFilter: statusFilter,

            cityIdOptions: [],
            usersFilter: usersFilter,

            rules: {
                messageType: [{
                    required: true,
                    message: "消息类型不能为空",
                    trigger: "change"
                }],
                messageTitle: [{
                    required: true,
                    message: "消息标题不能为空",
                    trigger: "change"
                }],
            }
        };
    },
    created() {
        this.init("message_info/template", 1).loadData();
        // this.$post('/admin/message_info/list').then(data => {
        //     console.log(data)
        // })
        // this.combOptions("city").then(info => {
        //   this.cityIdOptions = info;
        // });


        // this.$get('/admin/goods_theme/label_list').then(data => {
        //     this.labelList = data
        // })
    },
    filters: {
        statusFilter(status) {
            return statusFilter[parseInt(status)];
        },
    },
    methods: {
        submitFormAction () {
            this.$refs['dataForm'].validate(valid => {
                if (valid) {
                this.submiting = true
                const postData = Object.assign({}, this.temp)
                // postData.prizeList.forEach((el, idx) => {
                //     Object.keys(el).forEach(k => {
                //     postData['prizeList[' + idx + '].' + k] = el[k]
                //     })
                // })
                // if (!postData.id) {
                //     delete postData.id
                // }
                // delete postData.prizeList
                postData.marketingType = this.marketingType
                let url = '/admin/message_info/template/add'
                if (this.isEditing) {
                    url = '/admin/message_info/template/modify'
                }
                this.$post(url, postData)
                    .then(data => {
                    this.loadData()
                    this.$$notify('操作成功')
                    this.dialogFormVisible = false
                    })
                    .finally(_ => {
                    this.submiting = false
                    })
                }
            })
        },
        // loadData () {
        //     this.$get('/admin/goods_theme/list_all', this.filters).then(data => {
        //         data.forEach(el => {
        //         el.startTime && (el.startTime = parseTime(el.startTime))
        //         el.onlineStartTime &&
        //             (el.onlineStartTime = parseTime(el.onlineStartTime))
        //         el.onlineEndTime && (el.onlineEndTime = parseTime(el.onlineEndTime))
        //         el.endTime && (el.endTime = parseTime(el.endTime))
        //         el.labelList &&
        //             (el.labelList = el.labelList.map(i => {
        //             return i.labelId
        //             }))
        //         })
        //         this.list = data
        //     })
        // },
        handleCurrentChange () {
            this.loadData()
        },
    }
};

</script>
       
<style scoped>
    .avatar-uploader {
        width: 375px;
        height: 155px;
    }
    
    .avatar-uploader>>>.avatar {
        width: 375px;
        height: 155px;
    }
    
    .avatar-uploader>>>.avatar-uploader-icon {
        width: 375px;
        height: 155px;
    }
    .img-src{
        width:100px;
    }
</style>